<template>
  <div class="app-container" style="position: relative">
    <!-- 流程设计器，负责绘制流程等 -->
    <!-- <myProcessDesigner -->
    <my-process-designer
      :key="`designer-${reloadIndex}`"
      v-model="xmlString"
      v-if="xmlString !== undefined"
      :value="xmlString"
      v-bind="controlForm"
      keyboard
      ref="processDesigner"
      @init-finished="initModeler"
      :additionalModel="controlForm.additionalModel"
      @save="save"
    />
    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
    <!-- <MyProcessPalette -->
    <MyProcessPanel
      :key="`penal-${reloadIndex}`"
      :bpmnModeler="modeler"
      :prefix="controlForm.prefix"
      class="process-panel"
      :model="model"
    />
  </div>
</template>
<script setup name="ModelEditor">
import useTagsViewStore from '@/store/modules/tagsView'
import { useRoute, useRouter } from 'vue-router'
// // import { translations } from '@/components/bpmnProcessDesigner/src/translations'
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
// // import xmlObj2json from "./utils/xml2json";
import myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
// // import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
// // 自定义侧边栏
import MyProcessPanel from '@/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue'
import {
  getModel,
  saveModel,
  addModel,
  updateModel
} from '@/api/workflow/model'
const { proxy } = getCurrentInstance()
const router = useRouter()

const xmlString = ref(undefined) // BPMN XML
const modeler = ref(null)
const reloadIndex = ref(0)
const controlForm = ref({
  simulation: true,
  labelEditing: false,
  labelVisible: false,
  prefix: 'flowable',
  headerButtonSize: 'mini',
  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
})
// 流程模型的信息
const model = ref({})
onMounted(() => {
  // 如果 modelId 非空，说明是修改流程模型
  const modelId =
    router.currentRoute.value.query && router.currentRoute.value.query.modelId
  if (modelId) {
    getModel(modelId).then(data => {
      xmlString.value = data.data.bpmnXml
      model.value = {
        ...data,
        bpmnXml: undefined // 清空 bpmnXml 属性
      }
    })
  }
})
const initModeler = item => {
  setTimeout(() => {
    modeler.value = item
  }, 10)
}

const save = bpmnXml => {
  const val = bpmnXml?.replace(/<flowable:properties \/>/g, '')
  const data = {
    ...model.value,
    bpmnXml: val // bpmnXml 只是初始化流程图，后续修改无法通过它获得
  }
  proxy
    .$confirm('是否将此模型保存为新版本？', '提示', {
      distinguishCancelAndClose: true,
      confirmButtonText: '是',
      cancelButtonText: '否'
    })
    .then(() => {
      confirmSave(data, true)
    })
    .catch(action => {
      if (action === 'cancel') {
        confirmSave(data, false)
      }
    })
}
const confirmSave = (data, newVersion) => {
  let params = {
    bpmnXml: data.bpmnXml,
    modelId: data.data.modelId,
    newVersion: newVersion
  }
  // 添加的提交
  saveModel(params).then(response => {
    proxy.$modal.msgSuccess('保存成功')
    // 跳转回去
    close()
  })
}
/** 关闭按钮 */
const close = () => {
  router.push({ path: '/process/workModel' })
  useTagsViewStore().delView(router.currentRoute.value)
}
</script>

<style lang="scss">
//body {
//  overflow: hidden;
//  margin: 0;
//  box-sizing: border-box;
//}
//.app {
//  width: 100%;
//  height: 100%;
//  box-sizing: border-box;
//  display: inline-grid;
//  grid-template-columns: 100px auto max-content;
//}
.demo-control-bar {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  .open-control-dialog {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 32px;
    background: rgba(64, 158, 255, 1);
    color: #ffffff;
    cursor: pointer;
  }
}

// TODO 芋艿：去掉多余的 faq
//.info-tip {
//  position: fixed;
//  top: 40px;
//  right: 500px;
//  z-index: 10;
//  color: #999999;
//}

.control-form {
  .el-radio {
    width: 100%;
    line-height: 32px;
  }
}
.element-overlays {
  box-sizing: border-box;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fafafa;
}

.my-process-designer {
  height: calc(100vh - 135px);
}
.process-panel__container {
  position: absolute;
  right: 0;
  top: 55px;
  height: calc(100vh - 84px);
}
</style>
